import React, { useState,useEffect, useContext } from 'react'
import Header from '../../components/Header/Header'
import { Button, Toast } from 'antd-mobile'
import { Link } from 'react-router-dom'

import { $pre } from '../../http/http';
import { reqgetgoodsinfo,reqcartadd } from '../../http/api'
import './Detail.less'
import {MyContext} from '../../App'
export default function Detail(props) {
  const [info,setInfo]=useState({})
  const {state:{userInfo:{uid}}}=useContext(MyContext)

  useEffect(()=>{
    reqgetgoodsinfo({id:props.match.params.id}).then(res=>{
      setInfo(res.data.list[0])
    })
  },[])

  const addShop=()=>{
    reqcartadd({
      uid,
      type:1,
      // type,
      goodsid:props.match.params.id,
      num:1,
    })
  }

  return (
    <div>
        <Header title='商品详情' back></Header>
        <div className='card' >
          <img src={$pre + info.img} alt="" />
          <div >
            <h3>商品名称:{info.goodsname}</h3>
            <div>价格:{info.price}</div>
            <div>市场价格：{info.market_price}</div>
          </div>
        </div>
        <Button color='primary' onClick={()=>addShop()}>加入购物车</Button>
        <Link to={"/index/shop"} className="button">跳转购物车</Link>

    </div>
  )
}
